<template>
  <div>
    <el-form ref="form" :model="pageObj" label-width="110px" size="small" v-if="$route.query.id == 5">
      <el-form-item label="网站标题">
        <el-input @input="updateInputNew($event, 'title')" :value="pageObj.title" placeholder="请输入网站标题">
        </el-input>
      </el-form-item>

      <el-form-item label="顶部样式">
        <el-select :value="pageObj.tuanzhang" placeholder="请选择" @change="updateInputNew($event, 'tuanzhang')">
          <el-option label="显示LOGO和图标" value="0"></el-option>
          <el-option label="显示定位并要求设置收货地址" value="1"></el-option>
          <el-option label="显示定位但无任何操作" value="2"></el-option>
          <el-option label="显示定位并可修改定位" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="头部LOGO" v-if="pageObj.tuanzhang == 0">
        <uploadpic :piclink="pageObj.index_logo" :width="320" :height="80" :real_width="160" :real_height="40" :is_more="false" @send_pic="onSuccess_logo">
        </uploadpic>
      </el-form-item>

      <el-form-item label="是否显示客服">
        <el-switch class="zdySwith" :width="80" :value="pageObj.is_search" active-color="#13ce66" @change="updateInputNew($event, 'is_search')" inactive-color="#ffffff" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>

      <el-form-item label="客服图片" v-if="pageObj.is_search == 1">
        <uploadpic :piclink="pageObj.background || ''" width="375" :real_width="750" :real_height="130" :is_more="false" @send_pic="loadSuccess_bj">
        </uploadpic>
      </el-form-item>

      <el-divider v-if="headericon"></el-divider>
      <el-form-item label="是否显示图标" v-if="headericon">
        <el-switch class="zdySwith" :width="80" :value="headericon.show" active-color="#13ce66" @change="changeMenu" inactive-color="#ffffff" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <template v-if="headericon && headericon.show == 1">
        <el-form-item label="左侧图标">
          <div class="index_img_nav img_nav containerImgs">
            <van-icon :name="leftIcon.piclink" size="90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload :onload="befau" url="/api/common/upload/index/" :on-success="uploadSuccessleft" />
            </span>
            <i @click="delIcon(1)" v-show="leftIcon.piclink" class="el-icon-delete deleBtm"></i>
          </div>
          <div class="index_img_nav img_nav containerImgs" style="margin-left: 20px">
            <van-icon :name="leftIcon.desc" size="90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload :onload="befau" url="/api/common/upload/index/" :on-success="uploadSuccessleftdesc" />
            </span>
            <i @click="delIcon(3)" v-show="leftIcon.desc" class="el-icon-delete deleBtm"></i>
          </div>
        </el-form-item>
        <el-form-item label="链接到">
          <el-col :span="16">
            <el-input :value="leftIcon.links" @input="setIcon($event, 0, 'links')" class="mar-input"></el-input>
            <el-input :value="leftIcon.introduction" @input="setIcon($event, 0, 'introduction')"></el-input>
          </el-col>
          <el-col :span="6" class="mar_lf_15">
            <LinkMenu @sendRow="getSendRows($event)" :index="0"></LinkMenu>
          </el-col>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="右侧图标">
          <div class="index_img_nav img_nav containerImgs">
            <van-icon :name="rightIcon.piclink" size=" 90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload :onload="befau" url="/api/common/upload/index/" :on-success="uploadSuccessright" />
            </span>
            <i @click="delIcon(2)" v-show="rightIcon.piclink" class="el-icon-delete deleBtm"></i>
          </div>
          <div class="index_img_nav img_nav containerImgs" style="margin-left: 20px">
            <van-icon :name="rightIcon.desc" size="90px"></van-icon>
            <span class="imgnav-reselect">
              <my-upload :onload="befau" url="/api/common/upload/index/" :on-success="uploadSuccessrightdesc" />
            </span>
            <i @click="delIcon(4)" v-show="rightIcon.desc" class="el-icon-delete deleBtm"></i>
          </div>
        </el-form-item>
        <el-form-item label="链接到">
          <el-col :span="16">
            <el-input :value="rightIcon.links" @input="setIcon($event, 1, 'links')" class="mar-input"></el-input>
            <el-input :value="rightIcon.introduction" @input="setIcon($event, 1, 'introduction')"></el-input>
          </el-col>
          <el-col :span="6" class="mar_lf_15">
            <LinkMenu @sendRow="getSendRows" :index="1"></LinkMenu>
          </el-col>
        </el-form-item>
      </template>
    </el-form>

    <el-form ref="form" :model="pageObj" label-width="110px" size="small" v-else-if="$route.query.id == 50">
      <el-form-item label="网站标题">
        <el-input @input="updateInputNew($event, 'title')" :value="pageObj.title" placeholder="请输入网站标题">
        </el-input>
      </el-form-item>
    </el-form>

    <el-divider v-if="slidesList"></el-divider>
    <el-form ref="form" :model="slidesList" label-width="110px" size="small" v-if="slidesList">
      <el-form-item label="是否显示幻灯片">
        <el-switch class="zdySwith" :width="80" :value="slidesList.show" active-color="#13ce66" @change="updateInput($event, 'show')" inactive-color="#ffffff" active-text="显示" inactive-text="隐藏" active-value="1" inactive-value="0"></el-switch>
      </el-form-item>
      <el-form-item label="幻灯片样式" v-if="$route.query.id != 5 && $route.query.id != 50">
        <el-select :value="slidesList.style" placeholder="请选择" @change="updateInput($event, 'style')">
          <el-option label="幻灯片" value="0"></el-option>
          <el-option label="酒店卡片" value="1" v-if="
              $store.state.plugin.hotel &&
              $store.state.plugin.hotel.is_open == 1
            "></el-option>
        </el-select>
      </el-form-item>
      <div class="common-sjh-image-list-card" v-for="(item, i) in slidesList.banner" :key="i">
        <div class="image-card-wrap">
          <div class="image-card-move">
            <el-tooltip class="item" effect="dark" :content="i == 0 ? '第一个无法上移' : '上移'" placement="top-start">
              <i class="el-icon-top turn-up" @click="toCheckArrIndex(i, 'up')" :class="{ notTurnUp: i == 0 }"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" :content="
                i == slidesList.banner.length - 1 ? '最后一个无法下移' : '下移'
              " placement="top-start">
              <i class="el-icon-bottom turn-down" @click="toCheckArrIndex(i, 'down')" :class="{ notTurnUp: i == slidesList.banner.length - 1 }"></i>
            </el-tooltip>
          </div>
          <div class="image-card-cell common-sjh-img-card-image-4-3">
            <div class="sjh-image-editor">
              <uploadpic :piclink="item.piclink" :width="110" :height="70" :is_tip="false" :real_width="700" :real_height="360" :is_more="false" @send_pic="upload_pic($event, i)"></uploadpic>
            </div>
            <div class="image-input-text">
              <div class="wt-link-comp">
                <div class="wt-link-comp-content">
                  <div class="add-btn" v-if="item.links == ''">
                    <LinkMenu :index="i" @sendRow="getSendRow" style="position: absolute; z-index: 1; opacity: 0"></LinkMenu>
                    <div class="el-icon-plus"></div>
                    添加链接
                  </div>
                  <div class="link-detail-wrapper tl" v-else>
                    <div class="link-detail">
                      <div class="link-detail-url">
                        <el-input placeholder="请输入内容" v-model="item.links" size="mini">
                          <template slot="prepend">链接：{{ item.title | ellipsis }}</template>
                        </el-input>
                      </div>
                      <div class="link-detail-editor" @click="setBannerItem('', { index: i, name: 'links' })" title="删除">
                        <div class="btns">删除链接</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <i class="el-icon-close del-advertiseme" @click="delBannerItem(i, item.id)" title="删除"></i>
        </div>
      </div>

      <div class="btnAdd" @click="addBanner">
        <i class="el-icon-plus"></i>
      </div>
    </el-form>
  </div>
</template>

<script>
const KEY = "slides";
import uploadpic from "@/components/page/pic/up_pic";
import LinkMenu from "@/components/currency/Link_menu.vue";
import myUpload from "@/components/currency/MyUpload.vue";
import { mapState } from "vuex";
export default {
  data() {
    return {
      activeNames: ["1"],
    };
  },
  components: {
    uploadpic,
    LinkMenu,
    myUpload,
  },
  computed: {
    ...mapState({
      pageObj: (state) => state.modulePage.moduledata,
      slidesList: (state) => state.modulePage.data.slides,
      headericon: (state) => state.modulePage.data.headericon,
    }),
    leftIcon() {
      try {
        return this.headericon.banner[0];
      } catch {
        return {};
      }
    },
    rightIcon() {
      try {
        return this.headericon.banner[1];
      } catch {
        return {};
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    befau() {},
    uploadSuccessrightdesc(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 1,
          name: "desc",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadSuccessright(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 1,
          name: "piclink",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadSuccessleft(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 0,
          name: "piclink",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    uploadSuccessleftdesc(response) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        var obj = {
          val: response.result,
          index: 0,
          name: "desc",
        };
        this.$store.commit("setheadericon", obj);
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    delIcon(type) {
      if (type == 1) {
        this.leftIcon.piclink = "";
      } else if (type == 2) {
        this.rightIcon.piclink = "";
      } else if (type == 3) {
        this.leftIcon.desc = "";
      } else if (type == 4) {
        this.rightIcon.desc = "";
      }
    },
    setIcon(val, index, name) {
      var obj = {
        val: val,
        index: index,
        name: name,
      };

      this.$store.commit("setheadericon", obj);
    },
    changeMenu(e) {
      this.$store.commit("setModuleName", {
        key: "headericon",
        name: "show",
        val: e,
      });
    },
    loadSuccess_bj(pic) {
      this.$store.commit("setbaseedit", { label: "background", val: pic });
    },
    onSuccess_logo(pic) {
      this.$store.commit("setbaseedit", { label: "index_logo", val: pic });
    },
    updateInputNew(e, type) {
      this.$store.commit("setbaseedit", { label: type, val: e });
    },
    updateInput(e, type) {
      console.log(e);
      this.$store.commit("setModuleName", { key: KEY, name: type, val: e });
    },
    toCheckArrIndex(i, status) {
      //排序
      var index2 = "";
      if (status == "up") {
        index2 = i - 1;
      } else {
        index2 = i + 1;
      }
      this.$store.commit("sortBanner", {
        key: KEY,
        index1: i,
        index2: index2,
        status: status,
      });
    },
    delBannerItem(i, id) {
      console.log(i, id || 0);
      this.$store.commit("delBanner", { index: i, key: KEY, id: id || 0 });
    },
    setBannerItem(val, obj) {
      this.$store.commit("setBanner", {
        key: KEY,
        index: obj.index,
        val: val,
        name: obj.name,
      });
    },
    addBanner() {
      this.$store.commit("addBanner", "slides");
    },
    upload_pic(pic, i) {
      this.setBannerItem(pic, { index: i, name: "piclink" });
    },
    getSendRow(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      if (result.title != "自定义链接") {
        this.setBannerItem(result.desc, { index: result.index, name: "title" });
        this.setBannerItem(result.links, {
          index: result.index,
          name: "links",
        });
      } else {
        this.setBannerItem("自定义链接", {
          index: result.index,
          name: "title",
        });
        this.setBannerItem(" ", { index: result.index, name: "links" });
      }
    },
    getSendRows(row) {
      this.$store.dispatch("getShopsAll", { page: 1, page_size: 10 });
      var result = this.$fnc.getSendRow(row);
      if (result.title == "自定义链接") {
        this.setIcon(result.desc, result.index, "introduction");
        this.setIcon(result.links, result.index, "links");
      } else {
        this.setIcon(result.desc, result.index, "introduction");
        this.setIcon(result.links, result.index, "links");
      }
    },
  },
};
</script>

<style scoped lang="less">
.banner-box {
  background: #f0f0f0;
  padding: 20px 0 10px;
  margin-bottom: 10px;
  position: relative;
}
.mar_10 {
  margin-top: 10px;
}

.containerImgs {
  position: relative;
  .deleBtm {
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 100;
    transform: scale(1.2);
  }
}
</style>
